<template>
    <div class="imgBox" :class="{'nosdbg':playStatus==1}" v-if="detail.artist">
        <Back class="dtBack" :type="1" v-if="playStatus!=1"/>
        <!-- <my-video-play v-if="detail.videoFileUrls && detail.videoFileUrls.length>0" :poster='detail.imageUrl' :src='detail.videoFileUrls[0]' ref="player" @playStatus='getPlayStatus'/> -->
        <video-box v-if="detail.videoFileUrls && detail.videoFileUrls.length>0" @playStatus='getPlayStatus'/>
        <audio-box v-else-if="detail.musicFileUrls && detail.musicFileUrls.length>0"/>
        <template v-else>
            <my-siwper v-if="detail.headImageUrls" :imgs="detail.headImageUrls.length>0?detail.headImageUrls:[detail.imageUrl]" />
        </template>
        <i v-if="playStatus!=1" :class="`fabulous iconfont ${detail.attentionStatus==2?'icon-zanxuanzhong':'icon-zan'}`" @click="addLike">{{detail.attentionCount || 0}}</i>
    </div>
    <div class="describe dtrebg" v-if="detail.artist">
        <h1 class="title">{{detail.title}}<i class="iconfont icon-fenxiang" @click="goShare"></i></h1>
        <div class="author">作者：<span>{{detail.artist.nick}}</span> <auth-icon/></div>
        <h3>{{detail.subtitle}}</h3>
        <div v-if="detailType==2" class="price">￥<span>{{detail.auctionCurrentPrice?detail.auctionCurrentPrice.decimalTwoString:0}}</span></div>
        <div v-else class="price">￥<span>{{detail.internalPrice.decimalTwoString}}</span><i>购买可获{{detail.points}}积分</i></div>
        <div class="pzbz">
            <div class="stsm"><img src="/images/ts.png" />正版授权</div>
            <div class="stsm"><img src="/images/ts.png" />全国包邮</div>
            <div class="stsm"><img src="/images/ts.png" />不支持退换货</div>
        </div>
        <!-- <div class="bz">注：所有艺术品均为实体商品</div> -->
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mySiwper from '@/components/mySiwper.vue'
import Back from '@/components/back.vue'
import authIcon from '@/components/authIcon.vue'
import myVideoPlay from "@/components/myVideoPlay.vue";
import audioBox from "./audioBox.vue";
import {toast} from '@/utils/common'
import VideoBox from './videoBox.vue'
export default {
    components:{
       mySiwper,
       Back,
       authIcon,
       myVideoPlay,
       audioBox,
        VideoBox
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            detail:computed(()=>store.state.arApi.detail),
            detailType:computed(()=>store.state.arApi.detailType),  // 1为商品详情，2为拍卖详情
            playStatus:0  // 播放状态，1为播放，0为停止
        })

        const goShare = () => router.push(`/share/${state.detailType}/${state.detail.goodsId}`)

        const goBack = ()=> router.back()

        const addLike = async ()=>{
            
            const goodsId = route.params.id
            if(state.detail.attentionStatus==2){  // 取消喜欢
                const res = await store.dispatch("arApi/cancel_goods_live", {goodsId})
                if(res.success){
                    //toast('取消喜欢成功')
                    const cData = {...state.detail}
                    cData.attentionCount?cData.attentionCount--:cData.attentionCount=0
                    cData.attentionStatus = 1
                    store.commit('arApi/set_detail',cData)
                }else{
                   // toast(res.message)
                }
            }else{  // 添加喜欢
                const res = await store.dispatch("arApi/set_goods_live", {goodsId})
                if(res.success){
                    //toast('成功添加喜欢！')
                    const cData = {...state.detail}
                    cData.attentionCount?cData.attentionCount++:cData.attentionCount=1
                    cData.attentionStatus = 2
                    store.commit('arApi/set_detail',cData)
                }else{
                   // toast(res.message)
                }
            } 
            console.log("state.detail:",state.detail)
        }
        const getPlayStatus = (flag)=>{
            state.playStatus = flag
        }

        return{
            ...toRefs(state),
            goBack,
            addLike,
            goShare,
            getPlayStatus
        }
    }
}
</script>

<style lang="scss" scoped>
    .imgBox{
        width: 100%;
        position: relative;
        z-index: 10;
        max-height: 800px;
        overflow: hidden;
        &.nosdbg{
            &::before{
                display: none;
            }
        }
        &::before{
            content: '';
            display: block;
            position: absolute;
            z-index: 8;
            width: 100%;
            left: 0;
            top: 0;
            height: 240px;
            background: url('/images/dttop.png') left top no-repeat;
            background-size:100% 100% ;
        }
        img{
            display: block;
            width: 100%;
        }
        .back{
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 10;
            left: 15px;
            top: 20px;
            width: 36px;
            height: 36px;
            border-radius:50% ;
            img{
                display: block;
                width: 100%;
                height: 100%;
                &:hover{
                    opacity: 0.5;
                }
            }
        }
        .fabulous{
            position: absolute;
            right: 40px;
            bottom: 44px;
            z-index: 10;
            height: 64px;
            line-height: 64px;
            padding: 0 28px;
            background: rgba(214, 53, 53, 0.8);
            border-radius: 32px;
            color: #fff;
            font-size: 28px;
            font-weight: bold;
            &::before{
                margin: 0 6px 0 0;
            }
        }
    }
    .describe{
        padding: 40px 40px 0 40px;
        color: #fff;
        h1{
            position: relative;
            z-index: 10;
            font-size: 36px;
            font-weight: bold; 
            color: var(--baseColor);
            line-height: 50px;
            padding: 0 70px 0 0;
            i{
                position: absolute;
                z-index: 10;
                right: 0;
                top: 0;
                color: #fff;
                font-size: 50px;
                font-weight: normal;
            }
        }
        p,h3{
            line-height: 36px;
            font-weight: 400;
            padding: 30px 0 0 0;
            font-size: 28px;
        }
        h3{
           line-height: 46px; 
        }
        .author{
            display: flex;
            height: 44px;
            line-height: 44px;
            font-size: 26px;
            color: #fff;
            margin: 30px 0 0 0;
            width: 100%;
            overflow:hidden;
            span{
                padding: 0 10px 0 0;
            }
        }
        .price{
            color: var(--baseColor);
            font-size: 26px;
            padding: 10px 0 0 0;
            span{
                font-size: 48px;
                font-weight: bold;
            }
            i{
                color: rgba(255, 255, 255, 0.5);
                font-weight: normal;
                font-style: normal;
                padding: 0 0 0 10px;
            }
        }
        .bz{
            font-size: 26px;
            color: #fff;
            line-height: 40px;
            text-align: right;
            padding: 20px 0 30px 0;
        }
        .pzbz{
            display: flex;
            margin: 20px 0 40px 0;
            position: relative;
            z-index: 11;
            background: #022424;
            .stsm{
                display: inline-flex;
                height: 60px;
                padding: 0 20px;
                background: #0E6161;
                border-radius: 30px;
                font-size: 26px;
                justify-content: center;
                align-items: center;
                &+.stsm{
                    margin-left:20px ;
                }
                img{
                    float: left;
                    display: block;
                    width: 30px;
                    height: 24px;
                    margin: 0 8px 0 0;
                }
            }
        }
    }
    
</style>